var $wrap = $('#uploader'),

  // 图片容器
  $queue = $('<ul class="filelist"></ul>')
  /* .prepend($wrap.find('.queueList')), */

  // 照片列表
  // $queueList = $wrap.find('.queueList');
  $imageList = $wrap.find('.image-list');

  // 状态栏，包括进度和控制按钮
  $statusBar = $wrap.find('.statusBar'),

  // 文件总体选择信息。
  $info = $statusBar.find('.info'),

  // 上传按钮
  $upload = $wrap.find('.uploadBtn'),

  // 没选择文件之前的内容。
  $placeHolder = $wrap.find('.placeholder'),

  $progress = $statusBar.find('.progress').hide(),

  // 添加的文件数量
  fileCount = 0,

  // 添加的文件总大小
  fileSize = 0,

  // 优化retina, 在retina下这个值是2
  ratio = window.devicePixelRatio || 1,

  // 缩略图大小
  thumbnailWidth = 110 * ratio,
  thumbnailHeight = 110 * ratio,

  // 可能有pedding, ready, uploading, confirm, done.
  state = 'pedding',

  // 所有文件的进度信息，key为file id
  percentages = {},

  // 判断浏览器是否支持图片的base64
  isSupportBase64 = (function() {
    var data = new Image();
    var support = true;
    data.onload = data.onerror = function() {
      if (this.width != 1 || this.height != 1) {
        support = false;
      }
    }
    data.src = "";
    return support;
  })(),

  uploader = WebUploader.create({
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash
    pick: {
      id: '#image-list',
      innerHTML: `<span class="mui-icon mui-icon-plus" style="font-size:36px;color:#8f8f94"></span>`
    },


    // 只允许选择图片文件。
    accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/*'
    },

    fileNumLimit: 6,
    fileSizeLimit: 60 * 1024 * 1024, // 200 M
    fileSingleSizeLimit: 10 * 1024 * 1024, // 50 M

    // swf文件路径
    swf: '../js/Uploader.swf',

    // 选完文件后，是否自动上传
    auto: true,

    // 分片处理大文件上传
    chunked: false,
    chunkSize: 512 * 1024,

    headers: { 'XX-Token': $state.token, 'XX-Device-Type': app.clientType.versions.android ? 'android' : 'iphone' },

    // 文件接收服务器
    // server: API.postImageUpload,
    server: uploadURL,

    formData: {
      imageId: 123
    },

  });

uploader.onFileQueued = function(file) {
  fileCount++;
  fileSize += file.size;

  if (fileCount === 1) {
    $placeHolder.addClass('element-invisible');
    $statusBar.show();
  }

  addFile(file);
  setState('ready');
  updateTotalProgress();
};

// 当有文件添加进来时执行，负责view的创建
function addFile(file) {
  var $li = $('<li id="' + file.id + '">' +
      '<p class="imgWrap"></p>' +
      '</li>'),

    $btns = $('<div class="file-panel">' +
      '<span class="cancel">删除</span>' +
      '<span class="rotateRight">向右旋转</span>' +
      '<span class="rotateLeft">向左旋转</span></div>'),
    $prgress = $li.find('p.progress span'),
    $wrap = $li.find('p.imgWrap'),
    $info = $('<p class="error" style="margin: 0; padding: 0; text-align: center;"></p>'),

    showError = function(code) {
      switch (code) {
        case 'exceed_size':
          text = '文件大小超出';
          break;

        case 'interrupt':
          text = '上传暂停';
          break;

        default:
          text = '上传失败';
          break;
      }

      $info.text(text).appendTo($li);
    };

  if (file.getStatus() === 'invalid') {
    showError(file.statusText);
  } else {
    // @todo lazyload
    $wrap.text('预览中');
    uploader.makeThumb(file, function(error, src) {
      var img;

      if (error) {
        $wrap.text('不能预览');
        return;
      }

      if (isSupportBase64) {
        img = $('<img src="' + src + '">');
        $wrap.empty().append(img);
      } else {
        $.ajax('../../server/preview.php', {
          method: 'POST',
          data: src,
          dataType: 'json'
        }).done(function(response) {
          if (response.result) {
            img = $('<img src="' + response.result + '">');
            $wrap.empty().append(img);
          } else {
            $wrap.text("预览出错");
          }
        });
      }
    }, thumbnailWidth, thumbnailHeight);

    percentages[file.id] = [file.size, 0];
    file.rotation = 0;
  }

  file.on('statuschange', function(cur, prev) {
    if (prev === 'progress') {
      $prgress.hide().width(0);
    } else if (prev === 'queued') {
      $li.off('mouseenter mouseleave');
      $btns.remove();
    }

    // 成功
    if (cur === 'error' || cur === 'invalid') {
      console.log(file.statusText);
      showError(file.statusText);
      percentages[file.id][1] = 1;
    } else if (cur === 'interrupt') {
      showError('interrupt');
    } else if (cur === 'queued') {
      $info.remove();
      $prgress.css('display', 'block');
      percentages[file.id][1] = 0;
    } else if (cur === 'progress') {
      $info.remove();
      $prgress.css('display', 'block');
    } else if (cur === 'complete') {
      $prgress.hide().width(0);
      $li.append('<span class="success"></span>');
    }

    $li.removeClass('state-' + prev).addClass('state-' + cur);
  });

  $li.on('mouseenter', function() {
    $btns.stop().animate({ height: 30 });
  });

  $li.on('mouseleave', function() {
    $btns.stop().animate({ height: 0 });
  });

  $btns.on('click', 'span', function() {
    var index = $(this).index(),
      deg;

    switch (index) {
      case 0:
        uploader.removeFile(file);
        return;

      case 1:
        file.rotation += 90;
        break;

      case 2:
        file.rotation -= 90;
        break;
    }

    if (supportTransition) {
      deg = 'rotate(' + file.rotation + 'deg)';
      $wrap.css({
        '-webkit-transform': deg,
        '-mos-transform': deg,
        '-o-transform': deg,
        'transform': deg
      });
    } else {
      $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
    }

  });

  // $li.appendTo($queue);
  $imageList.before($li);
}

function setState(val) {
  var file, stats;

  if (val === state) {
    return;
  }

  $upload.removeClass('state-' + state);
  $upload.addClass('state-' + val);
  state = val;

  switch (state) {
    case 'pedding':
      $placeHolder.removeClass('element-invisible');
      $queue.hide();
      $statusBar.addClass('element-invisible');
      uploader.refresh();
      break;

    case 'ready':
      $placeHolder.addClass('element-invisible');
      $('#filePicker2').removeClass('element-invisible');
      $queue.show();
      $statusBar.removeClass('element-invisible');
      uploader.refresh();
      break;

    case 'uploading':
      $('#filePicker2').addClass('element-invisible');
      $progress.show();
      $upload.text('暂停上传');
      break;

    case 'paused':
      $progress.show();
      $upload.text('继续上传');
      break;

    case 'confirm':
      $progress.hide();
      $('#filePicker2').removeClass('element-invisible');
      $upload.text('开始上传');

      stats = uploader.getStats();
      if (stats.successNum && !stats.uploadFailNum) {
        setState('finish');
        return;
      }
      break;
    case 'finish':
      stats = uploader.getStats();
      if (stats.successNum) {
        alert('上传成功');
      } else {
        // 没有成功的图片，重设
        state = 'done';
        location.reload();
      }
      break;
  }

  // updateStatus();
}

function updateTotalProgress() {
  var loaded = 0,
    total = 0,
    spans = $progress.children(),
    percent;

  $.each(percentages, function(k, v) {
    total += v[0];
    loaded += v[0] * v[1];
  });

  percent = total ? loaded / total : 0;


  spans.eq(0).text(Math.round(percent * 100) + '%');
  spans.eq(1).css('width', Math.round(percent * 100) + '%');
  // updateStatus();
}

function updateStatus() {
  var text = '',
    stats;

  if (state === 'ready') {
    text = '选中' + fileCount + '张共' +
      WebUploader.formatSize(fileSize) + '';
  } else if (state === 'confirm') {
    stats = uploader.getStats();
    if (stats.uploadFailNum) {
      text = '已成功上传' + stats.successNum + '张,' +
        stats.uploadFailNum + '张上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
    }

  } else {
    stats = uploader.getStats();
    text = '共' + fileCount + '张(' +
      WebUploader.formatSize(fileSize) +
      '),已上传' + stats.successNum + '张';

    if (stats.uploadFailNum) {
      text += ',失败' + stats.uploadFailNum + '张';
    }
  }

  $info.html(text);
}